{% extends "h:templates/layouts/base.html.jinja2" %}
{% from "h:templates/includes/js_app.html.jinja2" import css_bundle, js_app_container, js_bundle %}

{% block page_title %}{{ heading|default("Sign up for Hypothesis") }}{% endblock %}

{% block header %}
  {% include "h:templates/includes/logo-header.html.jinja2" %}
{% endblock %}

{% block styles %}
  {{ super() }}
  {{ css_bundle('forms_css') }}
{% endblock %}

{% block content %}
  <div class="form-container">
    {# An empty "form" means signup was successful. Otherwise there were errors. #}
    {% if not js_config.get("form") %}
      <h1 class="form-header">
        {{ self.page_title() }}
      </h1>
      <div class="form-description">
        {% if message %}<p>{{ message }}</p>{% endif %}

        <p>Please check your email and open the link to activate your account.</p>

        <p>If you don't receive your activation link within a few minutes, send an
          email to <a href="mailto:support@hypothes.is">support@hypothes.is</a></p>
      </div>
    {% else %}
      {{ js_app_container(js_config) }}
    {% endif %}
    <footer class="form-footer">
      {# An empty "form" means signup was successful. Otherwise there were errors. #}
      {% if not js_config.get("form") %}
        Already activated your account?
      {% else %}
        Already have an account?
      {% endif %}
      <a class="link--footer" href="{{ request.route_path('login') }}">Log in</a>
    </footer>
  </div>
{% endblock %}

{% block scripts %}
  {{ super() }}

  {# Client-rendered frontend is only used if signup was not successful. #}
  {% if js_config.get("form") %}
    {{ js_bundle('login_forms_js') }}
  {% endif %}
{% endblock %}
